Ext.onReady(function(){


    Ext.create('Ext.form.Panel',{
        renderTo:'panel',
        height:600,
        width:400,

        title:'panel',
        items:[{
        xtype:'textfield',
            fieldLabel:'文本框',
            name:'name',
        }/*,{
            xtype: 'displayfield',
            fieldLabel: '消失'
        }
            ,{
                xtype: 'textarea',
                fieldLabel: '文本域'
            },{
                xtype: 'datefield',
                fieldLabel: '时间'
            },{
                xtype: 'button',
                text: '按钮'
            },{
                xtype: "fieldcontainer",
                fieldLabel: '单选',
                defaultType: 'radiofield',
                defaults: {
                    flex: 1
                },
                layout: 'hbox',
                items: [{
                    name: 'status',
                    boxLabel: 'A',
                    inputValue: 'a',
                    id: 'radio1'
                },{
                    name: 'status',
                    boxLabel: 'B',
                    inputValue: 'b',
                    id: 'radio2'
                },{
                    name: 'status',
                    boxLabel: 'C',
                    inputValue: 'c',
                    id: 'radio3'
                }]
            },{
                xtype: 'fieldcontainer',
                fieldLabel: '多选',
                defaultType: 'checkboxfield',
                items: [{
                    boxLabel: 'HTML',
                    inputValue: 'html',
                    id: 'checkbox1'
                },{
                    boxLabel: 'CSS',
                    inputValue: 'css',
                    checked: true,
                    id: 'checkbox2'
                },{
                    boxLabel: 'JavaScript',
                    inputValue: 'js',
                    id: 'checkbox3'
                }]
            },{
                xtype: 'hiddenfield',
                name: '隐藏 ',
                value: '1'
            },{
                xtype: 'numberfield',
                anchor: '100%',
                fieldLabel: '数字',
                maxValue: 99,
                minValue: 0
            },{
                xtype: 'spinnerfield',
                fieldLabel: '步数',
                step: 6,
                // override onSpinUp (using step isn't neccessary)
                onSpinUp: function() {
                    var me = this;
                    if (!me.readOnly) {
                        var val = me.step; // set the default value to the step value
                        if(me.getValue() !== '') {
                            val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                        }
                        me.setValue((val + me.step) + ' Pack');
                    }
                },

                // override onSpinDown
                onSpinDown: function() {
                    var me = this;
                    if (!me.readOnly) {
                        var val = me.step;
                        if(me.getValue() !== '') {
                            val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                        }
                        me.setValue((val - me.step) + ' Pack');
                    }
                }
            },{
                xtype: 'timefield',
                fieldLabel: '时间',
                minValue: '6:00 AM',
                maxValue: '8:00 PM',
                increment: 10,    //   min
                anchor: '100%'
            },{
                xtype: 'combobox',
                fieldLabel: '下拉框',
                store: Ext.create('Ext.data.Store', {
                    fields: ['abbr', 'name'],
                    data: [{
                        'abbr': 'html',
                        'name': 'HTML'
                    },{
                        'abbr': 'CSS',
                        'name': 'CSS'
                    },{
                        'abbr': 'JS',
                        'name': 'JavaScript'
                    }]
                }),
                valueField: 'abbr',
                displayField: 'name'  //  不会传
            }*//*,{
                xtype: 'filefield',
                fieldLabel: '文件',
                //labelWidth: 50,
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: '选择文件...'
            }*/
        ],
        buttons:[{text:"确定",handler:function(){
            //获取按钮的父表单
            var form=this.up("form").getForm();
            Ext.Ajax.request( {
                url : '/test/TestAction!getForm',
                method : 'post',
                form : 'panel', // 指定表单
                success : function(response, options) {
                    if(response.responseText!=null&&response.responseText!=""){
                    var o = JSON.parse(response.responseText)

                    }
                },
                failure : function() {
                }
            });

        }
        },{text:"取消",}],
    });
    //////////////////
        var component1 = Ext.create('Ext.Component', {
            html:'第一个组件'
        });

        var component2 = Ext.create('Ext.Component', {
            html: '第二个组件'
        });

        var component3 = Ext.create('Ext.Component', {
            html: '第三个组件'
        });

        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            title: '容器',
            border: 1,
            width: '50%',
            style: {borderStyle: 'solid', borderWidth: '2px' },
            items: [component1, component2,  component3]
        });

///////////////////////////////////////
    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        layout: 'absolute' ,
        items: [{
            title: 'Panel 1',
            x: 50,
            y: 50,
            html: 'Positioned at x:50, y:50',
            width: 500,
            height: 100
        },{
            title: 'Panel 2',
            x: 100,
            y: 95,
            html: 'Positioned at x:100, y:95',
            width: 500,
            height: 100
        }]
    });
    //////////////
    Ext.create('Ext.container.Container', {
        renderTo : Ext.getBody(),
        layout : 'accordion' ,
        width : 600,
        items : [{
            title : 'Panel 1',
            html : 'Panel 1 html content'
        },{
            title : 'Panel 2',
            html : 'Panel 2 html content'
        },{
            title : 'Panel 3',
            html : 'Panel 3 html content'
        },{
            title : 'Panel 4',
            html : 'Panel 4 html content'
        },{
            title : 'Panel 5',
            html : 'Panel 5 html content'
        }]
    });


   /* toolTip = new Ext.ToolTip({
        id : 'toolTip',
        anchor : 'bottom',
        html : 'This is a basic toolTip',
        title : 'Tool - Tip Title',
        closable : true,
        closeAction : 'hide'
    });

    toolTip.show()*/

});